<template>
  <div class="static_points_dividend">
    <c-title :text="text"></c-title>
    <div class="header">
      <div class="img">
        <img :src="avatar" alt="">
      </div>
      <div class="c-fff">{{ nickname }}</div>
    </div>
    <p class="total-money">奖励总额：<span style="color: #fb6b68;">{{ $i18n.t('money') }}{{ total_reward }}</span></p>

    <van-tabs v-model="active" color="#FB6B68">
      <van-tab title="奖励记录">
        <div style="padding-bottom: 1.5625rem; background: #fff;" v-if="list && list.length !== 0">
          <div v-for="item in list" :key="item.id" class="box">
            <div class="flex space-between " style="font-size: 0.875rem;">
              <span style="font-weight: bold;">分红ID:{{ item.id }}</span>
              <span style="color: #fb6b68;">{{ $i18n.t('money') }}{{ item.reward_amount }}</span>
            </div>
            <div class="content ">
              <div class="flex space-between ">
                <span>个人{{integral}}数：{{ item.point }}</span>
                <span>商城{{integral}}数：{{ item.has_one_shop_reward.shop_point }}</span>
              </div>
              <!-- <div class="flex space-between ">
                <span>结算金额：{{ item.has_one_shop_reward.settle_amount }}</span>
                <span>奖励比例：{{ item.has_one_shop_reward.reward_rate }}%</span>
              </div> -->
              <div class="time">{{ item.created_at }}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      avatar: "",
      nickname: "",
      total_reward: 0,
      integral: '',


      list: [],
      total_page: 1,
      page: 1,
      isLoadMore: true,

    };
  },
  activated() {
    this.isLoadMore = true;
    this.get_data();
  },
  methods: {
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return false;
      }
      let page = this.page + 1;
      this.get_data(page)
    },
    get_data(page = 1) {
      $http.post("plugin.static-point-dividend.frontend.reward-log.getRewardList", { page }, 'loading').then(async (res) => {
        this.isLoadMore = true;
        if (res.result) {
          if(res.basic_info){
            this.integral = res.basic_info.point;
          }else{
            this.integral = this.fun.getCustomTextLang('member_center.credit1','探币');
          }

          let { list, reward_summarize, plugin_name } = res.data;
          (page == 1) ? (this.list = list.data || []) : (this.list = this.list.concat(list.data))
          this.nickname = reward_summarize.member_info.username;
          this.avatar = reward_summarize.member_info.avatar_image;
          this.total_reward = reward_summarize.total_reward;
          this.total_page = list.last_page;
          this.page = list.current_page;
          this.text = plugin_name
        } else {
          this.$toast(res.msg)
        }
      })
    },

  }
};
</script>

<style scoped lang="scss">
.static_points_dividend {
  .c-fff {
    color: #fff;
  }

  .total-money {
    background: #fff;
    padding: 0.75rem 0.9375rem;
    text-align: left;
    margin-bottom: 0.625rem;
  }

  .header {
    display: flex;
    align-items: center;
    background: #fb6b68;
    padding: 1.5rem 0.9375rem;
  }

  .img {
    width: 3.625rem;
    height: 3.625rem;
    overflow: hidden;
    border-radius: 100px;
    margin-right: 0.3125rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .box {
    padding: 0.9375rem 0.9375rem 0;
  }

  .time {
    text-align: left;
    margin-top: 0.25rem;
  }

  .content {
    color: #6a6a6a;
    font-size: 0.6875rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f2f2f2;
  }

  .flex {
    display: flex;
  }

  .space-between {
    justify-content: space-between;
  }

  .c-fff {
    color: #fff;
  }
}
</style>
